<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证用户名和密码是否为空</title>
    <style>
       body{background:#ddd;}
      .box{background:#fff;padding:20px 30px;width:400px;margin: 0 auto;text-align:center;}
      .btn{width:180px;height:40px;background:#3388ff;border:1px solid #fff;color:#fff;font-size:14px;}
      .ipt{width:260px;padding:4px 2px;}
      .tips{width:440px;height:30px;margin:5px auto;background:#fff;color:red;border:1px solid #ccc;display:none;line-height:30px;padding-left:20px;font-size:13px;}
    </style>
</head>
<body>
    <div id="tips" class="tips"></div>
    <div class="box">
        <p><label>用户名：</label><input id="username" class="username" type="text"></p>
        <p><label>密码：<input id="password" class="password" type="password"></label></p>
        <p><button id="login" class="login-btn">登录</button></p>
    </div>
</body>
<script>
    window.onload = function(){  //当页面加载完成后执行的代码
       addBlur($("usersname"));//为用户名输入框添加失去焦点事件，然后判断当前输入的值是否为空
       addBlur($("password"));//为密码输入框添加失去焦点事件，然后判断当前输入的值是否为空

    }
    function $(obj){  //根据id获取指定元素
    return document.getElementById(obj);
    }

    function addBlur(obj){  //为指定的元素添加失去焦点事件
        obj.onblur = function(){
            isEmpty(this);
        }
    }
   
    function isEmpty(obj){  //检测当前表单是否为空
         if(obj.value == ""){
             $("tips").style.display = "block";//显示tips部分
             $("tips").innerHTML = "注意，输入的内容不能为空！";
         }else{
             $("tips").style.display = "name";
         }
    }
</script>
</html>